/*

Custom style

You can override the default class or style here

This file will not be overwritten by the updater

*/

/* ===================================
   RETRO ARCADE THEME ACTIVATION
   =================================== */
@import url('arcade-theme-midnight-neon.css');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ===================================
   NAVBAR LOGO — CENTRED
   These must live in custom.css (linked last)
   so they beat Bootstrap + style.css
   =================================== */
#mainNav .container,
#mainNav .container-fluid {
  position: relative !important;
}

#mainNav .navbar-brand {
  position: absolute;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

/* ===================================
   LOGIN & REGISTER — DARK THEME
   admin.css loads before custom.css so
   these overrides always win
   =================================== */

/* Page background — beats admin.css body{background:#f8f9fe} */
body.login-page,
body.login-body,
body.register-page {
  background-color: #0B011A !important;
  background-image:
    linear-gradient(rgba(34, 225, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 225, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
}

/* White card — beats admin.css .login-form{background:#FFF} */
.login-form,
.register-form {
  background-color: rgba(26, 11, 46, 0.92) !important;
  border: 2px solid rgba(34, 225, 255, 0.4) !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 40px rgba(106, 13, 173, 0.6),
    0 0 80px rgba(34, 225, 255, 0.15) !important;
  padding: 30px 20px !important;
}

/* Outer wrapper — keep dark, no extra card feel */
.login-container,
.register-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* Form inputs on login page */
body.login-page .form-control,
body.login-body .form-control,
body.register-page .form-control {
  background-color: #0B011A !important;
  border: 1px solid rgba(34, 225, 255, 0.5) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

body.login-page .form-control:focus,
body.login-body .form-control:focus,
body.register-page .form-control:focus {
  border-color: #22E1FF !important;
  box-shadow: 0 0 0 3px rgba(34, 225, 255, 0.2) !important;
  background-color: #0B011A !important;
  color: #ffffff !important;
}

body.login-page .form-control::placeholder,
body.login-body .form-control::placeholder,
body.register-page .form-control::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* Labels */
body.login-page .form-label,
body.login-body .form-label,
body.register-page .form-label,
body.login-page label,
body.login-body label,
body.register-page label {
  color: #F9D423 !important;
}

/* Login button */
body.login-page .btn-primary,
body.login-body .btn-primary,
body.register-page .btn-primary {
  background-color: #F9D423 !important;
  border-color: #F9D423 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  width: 100% !important;
  padding: 0.6rem !important;
  border-radius: 6px !important;
  box-shadow: 0 0 20px rgba(249, 212, 35, 0.5) !important;
}

body.login-page .btn-primary:hover,
body.login-body .btn-primary:hover,
body.register-page .btn-primary:hover {
  background-color: #22E1FF !important;
  border-color: #22E1FF !important;
  color: #000000 !important;
  box-shadow: 0 0 25px rgba(34, 225, 255, 0.6) !important;
}

/* Links */
body.login-page a,
body.login-body a,
body.register-page a {
  color: #22E1FF !important;
}

body.login-page a:hover,
body.login-body a:hover,
body.register-page a:hover {
  color: #FF00FF !important;
}

/* Checkbox */
body.login-page .form-check-input,
body.login-body .form-check-input,
body.register-page .form-check-input {
  background-color: #0B011A !important;
  border-color: rgba(34, 225, 255, 0.5) !important;
}

body.login-page .form-check-input:checked,
body.login-body .form-check-input:checked,
body.register-page .form-check-input:checked {
  background-color: #F9D423 !important;
  border-color: #F9D423 !important;
}

body.login-page .form-check-label,
body.login-body .form-check-label,
body.register-page .form-check-label {
  color: #cccccc !important;
}

/* Login logo spacing */
.login-logo img {
  max-width: 200px !important;
  margin-bottom: 24px !important;
}

/* ===================================
   LOGIN ACCESSIBILITY — CSS-only labels
   The login form has no <label> elements,
   only placeholders. We generate visible
   labels via ::before on the mb-3 wrappers
   so screen readers and sighted users both
   get context. We use the sibling input's
   placeholder text as the label content.
   =================================== */

body.login-page .mb-3 {
  position: relative !important;
  padding-top: 1.4rem !important;
}

/* Generate a visible label above each input using placeholder text */
body.login-page #username,
body.login-page #password {
  border-radius: 6px !important;
}

body.login-page .mb-3:has(#username)::before {
  content: 'Username';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.72rem;
  color: #F9D423;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.login-page .mb-3:has(#password)::before {
  content: 'Password';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.72rem;
  color: #F9D423;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Logo sizing */
body.login-page .login-logo img {
  max-width: 220px !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 1.5rem !important;
}

/* "Or Register" and "Back to Home" link spacing */
body.login-page .login-links {
  text-align: center !important;
  color: #aaaaaa !important;
  font-size: 0.9rem !important;
}

body.login-page .text-center.mt-3 {
  font-size: 0.85rem !important;
  margin-top: 1rem !important;
}